<template>
    <div class="back_contain_n">
        <div class="leftList">
            <li v-for="(item,index) in paramList" :key="index"
                :class="{'active': viewType == item.key}"
                @click="changeView(item)"
            >
                <el-badge :value="item.num" class="item">
                    <span>{{item.name}}</span>
                </el-badge>
            </li>
        </div>
        <!-- 头部搜索 -->
        <!--<div class="Search_Top_Part">-->
            <!--<div class="search_list" >-->
                <!--<div>-->
                    <!--<div class="input_flex daterange">-->
                        <!--<el-date-picker v-model="query.searchInput4" type="date" placeholder="消毒时间">-->
                        <!--</el-date-picker>-->
                    <!--</div>-->
                    <!--<div class="input_flex">-->
                        <!--<el-select clearable v-model="query.searchInput2" placeholder="消毒类型">-->
                            <!--<el-option label="1" value="1"></el-option>-->
                        <!--</el-select>-->
                    <!--</div>-->
                    <!--<div class="input_flex">-->
                        <!--<el-input clearable v-model="query.searchInput1" placeholder="消毒人"></el-input>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="search_bt">-->
                <!--<span class="zll-search" @click="getList">搜索</span>-->
                <!--<span class="zll-search-reset" @click="searchReset()">重置</span>-->
            <!--</div>-->
        <!--</div>-->
        <!-- table -->
        <sys-table
            :tableData="tableData" 
            :tableLoading="tableLoading" 
            :tableHeader="tableHeader" :scopeWidth="120"
            :isOperate="false"
        >
            <!--<template slot-scope="scope" slot="operate">-->
                <!--<el-button v-if="scope.row.sterilizeStatus == '0'" @click="edit(scope.row)" type="text" size="small">启动</el-button>-->
                <!--<el-button v-else @click="closeFun(scope.row)" type="text" size="small">关闭</el-button>-->
            <!--</template>-->
        </sys-table>
        <div class="zll-dialog">
            <popout title="成型机管理" :visible.sync="addDialog" v-if="addDialog" class="minSize">
                <add ref="add" slot="content" :editData="editData" ></add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton" @click="()=>{this.$refs.add.submitForm('addForm')}">提 交</p>
                </template>
            </popout>
        </div> 
    </div>
</template>

<script>
import Add from './add.vue'
export default {
    data(){
        return {
            addDialog: false,
            editData: {},
            viewType: '配拌投料',
            paramList: [									
                { name: "配拌投料",key:'配拌投料',tableType:'1'},
                { name: "挤塑直切",key:'挤塑直切',tableType:'2'},
                { name: "U管成型",key:'U管成型',tableType:'3'},
                { name: "包装",key:'包装',tableType:'4'},
            ],
            tableLoading:true, //table刷新

            tableData: [],
            tableHeader:[],
        }
    },
    methods: {
        changeView(val){
            this.viewType = val.key;
            this.getSterilizeList()
        },


		edit(val,type) {
			let self = this;
			self.addDialog = true;
			self.$nextTick(()=> {
				self.editData = Object.assign({},val);
			});
		},

        closeFun(val) {
            let self = this;
            self.$confirm('确定关闭？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
				self.$http({
					url: "/jinl/sterilize/updateCloseSterilize",
					method: "post",
					params:{id:val.id}
				}).then(resp => {
					if (resp.success) {
						self.$message.success(val.deviceCode+'成型机已关闭');
						self.getSterilizeList();
						return;
					}
					self.$message.error(resp.message);
				});

            });
        },


		getSterilizeList() {
			let self = this;
			self.productMaps = {};
			self.tableLoading = true;
			self.$http({
				url: "/jinl/sterilize/getSterilizeList",
				method: "post",
				params:{tabName:self.viewType}
			}).then(resp => {
				if (resp.success) {
					self.tableHeader =  [
						{"columnValue": "deviceCode", "columnName": "设备号" },
						{"columnValue": "sterilizeTypeCn", "columnName": "消毒类型" },
						{"columnValue": "sterilizeWater", "columnName": "消毒液" },
						{"columnValue": "createTimeFt", "columnName": "消毒时间" },
						{"columnValue": "sterilizeUserName", "columnName": "消毒人"},
					]
					self.tableData = resp.result;
				}
				self.tableLoading = false;
			});
		},

        searchReset() { //重置搜索

        },
    },
    mounted(){
        let self = this;
        self.getSterilizeList()
        self.$eventBus.$on("updateSterilizeList",function () {
            self.addDialog = false;
            self.getSterilizeList()
        })
    },
    components: {Add},
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
.leftList {
    display: flex;
    margin-bottom: 15px;
    li {
        list-style: none;
        width: 100px;
        height: 30px;
        line-height: 28px;
        border-bottom: 1px solid #fff;
        color: #333;
        text-align: center;
        cursor: pointer;
        margin-bottom: 10px;
        transition: all .5s;
        position: relative;
        display: flex;
        justify-content: center;
        &.active {
            color: #ff9935;
            border-color: #ff9935;
            position: relative;
            font-weight: 600;
            font-size: 14px;
        }
        .nums {
            position: absolute;
            right: 5px;
            top: 0;
            background: #f44336;
            color: #fff;
            height: 16px;
            line-height: 16px;
            font-weight: 400;
            border-radius: 8px;
            font-size: 12px;
            padding: 0 5px;
        }
    }
}
</style>